<template>
  <div class="">
    <van-nav-bar @click-left="onClickLeft" left-arrow title="创建招聘" fixed></van-nav-bar>
    <main>
      <input type="text" placeholder="请输入招聘标题20字以内" v-model="title" maxlength="30" />
      <van-field v-model="describes" class="textarea" rows="3" autosize type="textarea" maxlength="300" placeholder="请输入招聘描述300字以内" />
      <div id="editors"></div>
      <div class="up">
        <!-- 封面上传 -->
        <div class="uploading" v-show="!imgShow">
          <div :class="{
              active: fileList.lenght == 0 ? true : false,
              u_img: true,
            }">
            <van-uploader accept="image/*" v-model="fileList" :before-delete="getDelImg" :after-read="afterRead" multiple max-count="1">
              <div class="poster_tips">
                <img src="@a/images/video/add.png" alt="" />
              </div>
            </van-uploader>
          </div>
        </div>
     
        <div class="img_Show" v-if="imgShow">
          <div class="close">
            <van-icon name="cross" @click="imgCloseClick" />
          </div>

          <div class="imgShow">
            <img :src="fileList[0].url" alt="" />   
          </div>
        </div>
      </div>
      <p>添加封面图</p>

    </main>
    <footer>
      <div class="next" @click="next">下一步</div>
    </footer>

  </div>
</template>

<script>
import wangeditor from "wangeditor";

export default {
  name: "",
  data () {
    return {
      title: "",
      describes: "", //描述
      editor: "",
      editorContent: "", //文本内容
      imgUrl: "",
      fileList: [], // 展示上传图片
      show: false, //弹框
			totalSpread: 0, //是否全网付费推广
      showPopup: false, //密码弹出
      pwd: "", //密码
      showKeyboard: true,
      imgShow: false, //封面图片展示
      isSpread: 1, //是否推广
      spreadPrice: "", //单价
      spreadNum: "", //推广数
      attention: false, //是否关注公众号
      isPay: 1, //是去充值还是去支付
      beforeBalance: 0, //原推广总价
      beforePrice: "", //原推广单价
      beforeNum: "", //原推广次数
    };
  },

  //生命周期 - 创建完成（访问当前this实例）
  created () { },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted () {
    // 如果支持 popstate 一般移动端都支持了
  if (window.history && window.history.pushState) {
    // 往历史记录里面添加一条新的当前页面的url
    history.pushState(null, null, document.URL);
    // 给 popstate 绑定一个方法 监听页面刷新
    window.addEventListener('popstate', this.backChange, false);//false阻止默认事件
  }
    this.$store.dispatch("updateUserInfo");
    document.querySelector("#app").style.backgroundColor = "#fff";
    this.seteditor();
    // if (this.$route.query.id) {
    //   this.getInviteInfo();
    // }
    //如果时充值完或设置完支付密码
    if (JSON.parse(sessionStorage.getItem("recruitmentInfo"))) {
      this.echoInfo();
    }else{
      if (this.$route.query.id) {
        this.getInviteInfo();
      }
    }
  },
  destroyed(){
    window.removeEventListener('popstate', this.backChange, false);
  },
  methods: {
    // 手机系统返回键事件
    backChange() {
        if (JSON.parse(sessionStorage.getItem("recruitmentInfo"))) {
          sessionStorage.removeItem("recruitmentInfo");
        }
    },
    //点击下一步
    next(){
      let {
        title,
        describes,
        editorContent: content,
        imgUrl: cover,
        isSpread,
        spreadPrice,
        spreadNum,
        form,
        attention,
        card,
        changeTitle,
        beforeBalance, //原推广总价
        beforePrice, //原推广单价
        beforeNum, //原推广次数
        spreadTotalPrice,
				totalSpread, //是否全网付费推广
      } = this;
      if (title.trim() == "") return this.$toast("请输入招聘标题!");
      if (describes.trim() == "") return this.$toast("请输入招聘描述!");
      if (content.trim() == "") return this.$toast("请输入招聘内容!");
      if (cover.trim() == "") return this.$toast("请输入招聘封面!");
      let obj = {
        title, //标题
        describes, //描述
        content, //内容
        cover, //封面
        isSpread, //是否推广
        spreadPrice, //单价
        spreadNum, //次数
        spreadTotalPrice, //总价
        form, //是否表单
        attention, //是否关注
        card, //是否名片
        beforeBalance, //原推广总价
        beforePrice, //原推广单价
        beforeNum, //原推广次数
        changeTitle, //是否可更改标题
				totalSpread, //是否全网付费推广
      };
      if (this.$route.query.id) {
        obj.id = this.$route.query.id;
      }
      sessionStorage.setItem("recruitmentInfo", JSON.stringify(obj));
      this.$router.push({path:"/addRecruitmentNext",query:{id:this.$route.query.id,title:this.$route.query.title}})
    },
    //返回清空数据
    onClickLeft () {
      if (JSON.parse(sessionStorage.getItem("recruitmentInfo"))) {
        sessionStorage.removeItem("recruitmentInfo");
      }
      this.$router.back();
    },
    //文本编辑器
    seteditor () {
      this.editor = new wangeditor("#editors");
      //editor改变时，将里面的内容放进editorContent
      this.editor.config.onchange = (html) => {
        // console.log(html);
        this.editorContent = html;
      };
      this.editor.config.menus = [
        "head", //
        "bold", //
        "list", // 列表
        "justify", // 对齐方式
        "image", // 插入图片
        "undo", // 撤销
      ];
      this.editor.config.placeholder = "请输入招聘内容";
      //   /关闭粘贴样式的过滤
      this.editor.config.pasteFilterStyle = false;
      //忽略粘贴内容中的图片
      this.editor.config.pasteIgnoreImg = true;
      // 使用 base64 保存图片
      this.editor.config.uploadImgShowBase64 = true;
      // 隐藏“网络图片”tab
      this.editor.config.showLinkImg = false;
      //改变z-index
      this.editor.config.zIndex = 10;
      // 最大300M
      this.editor.config.uploadImgMaxSize = 300 * 1024 * 1024;
      this.editor.config.uploadImgServer =
        "http://wx-001.unionnetwork.com/zk/sys/oss/upload";
      this.editor.config.customUploadImg = (files, insert) => {
        // files 是 input 中选中的文件列表
        // insert 是获取图片 url 后，插入到编辑器的方法
        // console.log(files);
        let _this = this;
        let file = files[0];
        _this.$publicObj.getLoading("上传中...");
        // 上传代码返回结果之后，将图片插入到编辑器中
        _this.$publicObj.uploadFile(
          file,
          function (imgData) {
            insert(imgData);
            _this.$toast("上传成功");
            _this.$publicObj.closeLoading();
          },
          "/sys/oss/upload"
        );
      };

      this.editor.create();
    },
    //清除展示图片
    imgCloseClick () {
      this.fileList = [];
      this.imgUrl = "";
      this.imgShow = false;
    },
    //上传图片
    afterRead (file) {
      let _this = this;
      let files = file.file;
      //判断是否为图片文件
      if (files.type.indexOf("image") == -1) {
        this.$toast("请上传图片文件");
      } else {
        this.$publicObj.getLoading("上传中...");
        _this.$publicObj.uploadFile(
          files,
          function (imgData) {
            document.querySelector(".u_img").style.border = "none";

            _this.imgUrl = imgData;
            _this.$toast("上传成功");
            _this.$publicObj.closeLoading();
          },
          "/sys/oss/upload"
        );
      }
    },
    //删除图片
    getDelImg (elIndex) {
      let _this = this;

      return (file, name) => {
        let fileIndex = name.index;
        _this.fileList[elIndex].splice(fileIndex, 1);
        _this.imgUrl = "";
      };
    },
		// 获取招聘数据
    async getInviteInfo() {
      let userInfo = JSON.parse(sessionStorage.getItem("userWxData"));
      let {
        openid,
        nickname: name,
        headimgurl: image,
        sex,
        city,
        province,
      } = userInfo;
      let obj = {
        tableId: this.$route.query.id,
        openId: openid,
        name,
        image,
        userId: sessionStorage.getItem("agentId"),
        tableType: 15,
        sex,
        city,
        province,
        customerId:sessionStorage.getItem("agentIds")
      };
      let res = await this.$api.getArticleInfo(obj);
      if (res.code != 0) return;
      this.editor.txt.html(res.data.content); //内容
      this.title = res.data.title; //标题
      this.describes = res.data.describes; //描述
      this.imgUrl = res.data.cover; //封面图
      this.fileList = [{ url: res.data.cover }]; //封面图
      this.isSpread = res.data.isSpread; //是否推广
      this.spreadPrice = res.data.spreadPrice; //单价
      this.spreadNum = res.data.spreadNum; //推广数
      this.attention = res.data.attention; //是否关注公众号
			this.totalSpread = res.data.totalSpread || 0; //是否全网付费推广
      this.beforeBalance=res.data.spreadTotalPrice //原推广总价
      this.beforePrice=res.data.spreadPrice //原推广单价
      this.beforeNum=res.data.spreadNum//原推广次数
    },
      // 回显数据
    echoInfo () {
      let info = JSON.parse(sessionStorage.getItem("recruitmentInfo"));
      this.editor.txt.html(info.content); //内容
      this.title = info.title; //标题
      this.describes = info.describes; //描述
      this.imgUrl = info.cover; //封面图
      this.fileList = [{ url: info.cover }]; //封面图
      this.isSpread = info.isSpread; //是否推广
      this.spreadPrice = info.spreadPrice; //单价
      this.spreadNum = info.spreadNum; //推广数
      this.attention = info.attention; //是否关注公众号
			this.totalSpread = info.totalSpread || 0; //是否全网付费推广
      this.beforeBalance = info.beforeBalance; //原推广总价
      this.beforePrice = info.spreadPrice; //原推广单价
      this.beforeNum = info.spreadNum; //原推广次数
    },
  },
};
</script>
<style scoped lang='less'>
/* @import url(); 引入css类 */
.van-cell__value {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  .van-field {
    width: 80px;
    margin-right: 5px;
  }
}

.textarea {
  margin-top: 10px;
  background-color: #f3f5f7;
  padding: 12px !important;
  border-radius: 5px;
}
main {
 height: calc(100vh - 127px);
  padding: 46px 15px 0;
  overflow-y: scroll;
  input {
    margin-top: 7px;
    height: 40px;
    width: 100%;
    opacity: 1;
    background: #f3f5f7;
    border-radius: 5px;
    border: none;
    font-size: 12px;
    padding-left: 12px;
    box-sizing: border-box;
    &::-webkit-input-placeholder {
      /* placeholder颜色  */
      color: #bebebe;
    }
  }
  #editors {
    margin-top: 18px;
  }
  .up {
    margin-top: 10px;
    .uploading {
      width: 80px;
      height: 80px;
      position: relative;
      background-color: #fff;
    }
    //封面
    .u_img {
      width: 80px;
      height: 80px;
      box-sizing: border-box;
      margin-top: 4.000008px;
      box-shadow: 3.5px dashed rgba(153, 153, 153);
      .van_img {
        width: 80px;
        height: 80px;
        border: 0;
      }
      .poster_tips {
        width: 80px;
        height: 80px;
        display: -webkit-flex;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 100%;
          height: 100%;
        }
      }
      /deep/ .van-uploader {
        .van-uploader__preview-delete {
          width: 11.71875px;
          height: 11.71875px;
          i {
            font-size: 11.71875px;
            top: -0.585938px;
            left: -0.585938px;
          }
        }
      }
    }

    .img_Show {
      position: relative;

      .close {
        position: absolute;
        width: 12px;
        height: 12px;
        left: 68px;
        color: #fff;
        background-color: #000;
        border-bottom-left-radius: 10px;
        font-size: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .imgShow {
        display: flex;
        align-items: center;
        width: 80px;
        height: 80px;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  p {
    margin: 5px;
    font-size: 10px;
    text-align: left;
    color: #999999;
    letter-spacing: 1px;
  }
  h3 {
    margin: 25px 0;
    font-size: 14px;
    font-weight: 700;
    color: #333333;
  }
  .van-cell {
    padding: 10px 0;
  }
}
footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
  background-color: #fff;
  .next {
    width: 321px;
    height: 41px;
    background-color: #477fe6;
    font-size: 13px;
    color: #ffffff;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;

  }
}
</style>